<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>共享头部</title>
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../css/head.css">
  <link rel="stylesheet" href="../iconfont/iconfont.css">

</head>
<body>
  <script src="../jquery-1.9.1/jquery-1.9.1.min.js"></script>

  <!-- 登录 -->
  <div class="loginBox">
    <!-- 登录 -->
<div class="outside">
    <div id="login">
        <div class="login-head"></div>
    <!-- .............x............... -->
        <div class="text-right">
            <span>
                <i class="iconfont icon-cross-fill"></i>
            </span>
        </div>
        <h2>登录</h2>
        <div class="login-box">
            <span class="login-on tab-box ">
                手机验证码登录
            </span>
            <span class="tab-box" >密码登录</span>
          <div class="small-box login-active">
            <div> <input type="text" placeholder="手机号码" class="login-phone">
                <span class="no-vip">您不是Sisley会员，请注册</span>
            </div>
            <div> <input type="text" placeholder="手机验证码"  class="login-code"> 
            <span class="send-code">发送验证码</span>
            </div>
            <span class="short-img">短信验证码校验失败，请重试</span>
            <div class="rignt-login">
                <span class="login-span">登录</span>
            </div>
          </div>
          <div class="pass-box">
            <div><input type="text" placeholder="邮箱/手机号码" class="login-email">
                <span class="no-emill">登录账号必须为手机号或邮箱</span>
            </div>
            <div><input type="password" placeholder="密码" class="login-pass
                "></div> 
            <div class="box-rem">
                <div class="rem-left">
                  <span><input type="checkbox" checked='checked'></span>
                    <span>记住账号</span>
                </div>
                <div class="rem-right"><span>忘记密码？</span></div>
            </div>
            <div class="rignt-login login-top">
                <span class="login-in">登录</span>
            </div>
         </div>
         
         <!-- <div class="rignt-login">
            <span>登录</span>
        </div> -->
        </div>

        <p>
            创建账户
       </p>     
       <p>
           通过手机号码创建账户，您将成为Sisley法国希思黎会员。
       </p>
       <div class="under-phone"> <input type="text" placeholder="手机号码" class="under-phone"> </div>
       <div class="rignt-member">
        <span class="become-vip">成为会员</span>
        
         </div>

           <div class="kongbai"></div>
    </div>
</div>
    
</div>



     <!-- 头部 -->
        <div class="nav">
           <div class="nav-top">

               <!-- 左边 -->
               <div class="nt-one">
                   <a href="javascript:;">
                       <img src="../images/Untitled-1.svg" alt="">
                   </a>
                   <div class="nt-one-txt">
                       <p>My Sisley Club</p>
                   </div>
               </div>

               <!-- 中间 -->
               <div class="nt-two">
                 <img src="../images/topdark.svg" alt="">
                 <!-- <img src="../images/topwhite.svg" alt=""> -->
                 </div>


                <!-- 右侧 -->
                <div class="nt-three">
                   <i class="iconfont icon-erji"></i>
                   <i class="iconfont icon-search
                   "></i>
                   <i class="iconfont icon-geren"></i>
                   <a href="shopcar.html"><i class="iconfont icon-gouwudai"></i></a>
                </div>

              
           </div>
           <div class="nav-bottom">
                <div class="navbtm-wrap">
                   <!-- 左侧的导航 -->
                   <div class="nb-left">
                        <div class="nb-left1">
                              <a href="javascript:;" class="line xixi">护肤</a>
                              <div class="pull-one">
                               <div class="po-wrap">
                                    <ul class="po-ul">
                                      <li>
                                        <span>面部护理</span>
                                        <div class="content">
                                           <p>卸妆&清洁</p>
                                           <p>去角质&面膜</p>
                                           <p>化妆水</p>
                                           <p>眼唇护理</p>
                                           <p>面霜</p>
                                           <a href="list.html"><p>精华</p></a>
                                           <p>日间护理</p>
                                           <p>夜间护理</p>
                                           <p>修护</p>
                                           <p>美肤</p>
                                           <p>男士护理</p>
                                        </div>
                                      </li>
                                      <li>
                                        <span>身体护理</span>
                                        <div class="content">
                                           <p>抗老护理</p>
                                           <p>美颈护理</p>
                                           <p>美胸护理</p>
                                           <p>紧致肌肤</p>
                                           <p>保湿滋润</p>
                                           <p>塑身纤体</p>
                                           <p>身体磨砂</p>
                                           <p>手部&美甲护理</p>
                                        </div>
                                      </li>
                                      <li>
                                        <span>防晒</span>
                                        <div class="content">
                                           <p>面部防晒</p>
                                           <p>隔离防晒</p>
                                           <p>晒后修复</p>
                                           <p>防晒指数50+</p>
                                           <p>防晒指数30</p>
                                        </div>
                                      </li>
                                      <li>
                                        <span>肌肤问题</span>
                                        <div class="content">
                                           <p>抗衰老</p>
                                           <p>淡纹</p>
                                           <p>紧致</p>
                                           <p>保湿</p>
                                           <p>滋养</p>
                                           <p>焕亮肌肤</p>
                                           <p>美白淡斑</p>
                                           <p>纤体护理</p>
                                           <p>排浊</p>
                                           <p>局部护理</p>
                                        </div>
                                      </li>
                                      <li>
                                        <span>精选</span>
                                        <div class="content">
                                           <p>官网臻享</p>
                                           <p>新品</p>
                                           <p>必入星品</p>
                                           <p>抗皱修活系列</p>
                                           <p>致臻系列</p>
                                           <p>黑玫瑰系列</p>
                                           <p>全能乳液</p>
                                           <p>赋活系列</p>
                                           <p>藏红花系列</p>
                                           <p>修护系列</p>
                                           <p>植物净颜系列</p>
                                           <p>焕白系列</p>
                                           <p>抗皱修活防晒系列</p>
                          
                                        </div>
                                      </li>
                                    </ul>
                               </div>
                           </div>
                        </div>
                        <div class="nb-left2">
                          <a href="javascript:;" class="line">彩妆</a>
                          <div class="pull-two">
                           <div class="pt-wrap">
                                <ul class="pt-ul">
                                  <li>
                                    <span>底妆</span>
                                    <div class="content">
                                       <p>粉底</p>
                                       <p>遮瑕</p>
                                       <p>高光</p>
                                       <p>妆前</p>
                                       <p>蜜粉&散粉</p>
                                       <p>腮红&修容</p>
                                       <p>面部化妆刷</p>
                                     
                                    </div>
                                  </li>
                                  <li>
                                    <span>眼妆</span>
                                    <div class="content">
                                       <p>眼部遮瑕</p>
                                       <p>眼线笔</p>
                                       <p>睫毛膏</p>
                                       <p>眼影</p>
                                       <p>眉笔</p>
                                       <p>眉膏</p>
                                       <p>眼部化妆刷</p>
                                      
                                    </div>
                                  </li>
                                  <li>
                                    <span>唇妆</span>
                                    <div class="content">
                                       <p>唇线笔</p>
                                       <p>唇膏</p>
                                       <p>唇釉</p>
                                      
                                    </div>
                                  </li>
                                  <li>
                                    <span>妆容问题</span>
                                    <div class="content">
                                       <p>抗衰老</p>
                                       <p>黑眼圈</p>
                                       <p>光采美肌</p>
                                       <p>无暇美肌</p>
                                       <p>柔焦妆感</p>
                                       <p>亮泽妆感</p>
                                       <p>丰盈双唇</p>
                                       <p>放大双眸</p>
                                       <p>眉部</p>
                                       
                                    </div>
                                  </li>
                                  <li>
                                    <span>精选</span>
                                    <div class="content">
                                       
                                       <p>必入星品</p>
                                       <p>烟熏妆</p>
                                       <p>Sisley妆容</p>
                                       <p>无暇美肌</p>
                                       <p>修容</p>
                                       
                      
                                    </div>
                                  </li>
                                </ul>
                           </div>
                       </div>
                        </div>
                        <div class="nb-left3">
                          <a href="javascript:;" class="line">香氛</a>
                          <div class="pull-three">
                           <div class="ptr-wrap">
                                <ul class="ptr-ul">
                                  <li>
                                    <span>面部护理</span>
                                    <div class="content">
                                       <p>卸妆&清洁</p>
                                       <p>去角质&面膜</p>
                                       <p>化妆水</p>
                                       <p>眼唇护理</p>
                                       <p>面霜</p>
                                       <p>精华</p>
                                       <p>日间护理</p>
                                       <p>夜间护理</p>
                                       <p>修护</p>
                                       <p>美肤</p>
                                       <p>男士护理</p>
                                    </div>
                                  </li>
                                  <li>
                                    <span>身体护理</span>
                                    <div class="content">
                                       <p>抗老护理</p>
                                       <p>美颈护理</p>
                                       <p>美胸护理</p>
                                       <p>紧致肌肤</p>
                                       <p>保湿滋润</p>
                                       <p>塑身纤体</p>
                                       <p>身体磨砂</p>
                                       <p>手部&美甲护理</p>
                                    </div>
                                  </li>
                                  <li>
                                    <span>防晒</span>
                                    <div class="content">
                                       <p>面部防晒</p>
                                       <p>隔离防晒</p>
                                       <p>晒后修复</p>
                                       <p>防晒指数50+</p>
                                       <p>防晒指数30</p>
                                    </div>
                                  </li>
                                  <li>
                                    <span>肌肤问题</span>
                                    <div class="content">
                                       <p>抗衰老</p>
                                       <p>淡纹</p>
                                       <p>紧致</p>
                                       <p>保湿</p>
                                       <p>滋养</p>
                                       <p>焕亮肌肤</p>
                                       <p>美白淡斑</p>
                                       <p>纤体护理</p>
                                       <p>排浊</p>
                                       <p>局部护理</p>
                                    </div>
                                  </li>
                                  <li>
                                    <span>精选</span>
                                    <div class="content">
                                       <p>官网臻享</p>
                                       <p>新品</p>
                                       <p>必入星品</p>
                                       <p>抗皱修活系列</p>
                                       <p>致臻系列</p>
                                       <p>黑玫瑰系列</p>
                                       <p>全能乳液</p>
                                       <p>赋活系列</p>
                                       <p>藏红花系列</p>
                                       <p>修护系列</p>
                                       <p>植物净颜系列</p>
                                       <p>焕白系列</p>
                                       <p>抗皱修活防晒系列</p>
                      
                                    </div>
                                  </li>
                                </ul>
                           </div>
                       </div>
                        </div>
                        <div class="nb-left4">
                          <a href="javascript:;" class="line">护发</a>
                        </div>
                        <div class="nb-left5">
                          <a href="javascript:;" class="line">官网臻享</a>
                        </div>
                        <div class="nb-left6">
                          <a href="javascript:;" class="line">奢护服务预约</a>
                        </div>
                   </div>


                   <!-- 右侧的图标 -->
                   <div class="nb-right">
                     <a href="javascript:;" class="nbr-hover">
                       <!-- dark -->
                       <img src="../images/dark.svg" alt="">
                       <!-- white -->
                       <!-- <img src="../images/white.svg" alt=""> -->
                     </a>
                   </div>
                   
                    <!-- 右侧吸顶的图标 -->
                    <div class="nb-right-two">
                     <i class="iconfont icon-erji"></i>
                     <i class="iconfont icon-search
                     "></i>
                     <i class="iconfont icon-geren"></i>
                     <i class="iconfont icon-gouwudai"></i>
                    </div>
                 </div>
           </div>
        </div>
    <script src="../js/head.js"></script>
  </body>
  </html>